{% extends 'base_exam.html' %}

{% block title %}Exam result — {{ course.title }}{% endblock %}

{% block exam_header_meta %}Result{% endblock %}

{% block content %}
<div class="text-center py-3">
  {% if attempt.passed %}
    <div class="display-6 text-success mb-2"><i class="bi bi-trophy-fill"></i></div>
    <h3 class="fw-bold">Congratulations — you passed!</h3>
  {% else %}
    <div class="display-6 text-warning mb-2"><i class="bi bi-emoji-frown"></i></div>
    <h3 class="fw-bold">Not passed this time</h3>
    <p class="text-muted small mb-0">
      You need at least {{ pass_mark }}% to clear this exam.
    </p>
  {% endif %}

  <p class="text-muted mt-2">{{ course.title }}</p>
  <div class="fs-2 fw-bold mb-1">{{ attempt.score_percent }}%</div>
  <div class="text-muted small mb-3">
    {{ attempt.correct_count }} / {{ attempt.total_asked }} correct ·
    Pass mark {{ pass_mark }}% ·
    Time {{ time_taken_display }}
    {% if attempt.auto_submitted %} · <span class="text-danger">Auto-submitted (time expired)</span>{% endif %}
  </div>

  {% if attempt.is_flagged_for_review %}
  <div class="alert alert-warning text-start mx-auto mb-3" style="max-width:28rem;">
    <strong><i class="bi bi-flag-fill me-1"></i>Flagged for review</strong>
    <div class="small mb-0 mt-1">
      {{ attempt.flag_reason|default:"Integrity events were logged during this attempt. Staff may review before final certification." }}
    </div>
    <div class="small text-muted mt-1">This does not change your score automatically.</div>
  </div>
  {% endif %}

  {% if topic_breakdown %}
  <div class="text-start mx-auto mb-4" style="max-width:28rem;">
    <h6 class="fw-bold mb-2">Topic breakdown</h6>
    <p class="small text-muted">See where you were strong — useful for your next attempt.</p>
    {% for row in topic_breakdown %}
    <div class="mb-2">
      <div class="d-flex justify-content-between small mb-1">
        <span>{{ row.label }}</span>
        <span class="font-monospace">{{ row.correct }}/{{ row.total }} · {{ row.percent }}%</span>
      </div>
      <div class="progress" style="height:.5rem;">
        <div class="progress-bar {% if row.percent >= pass_mark %}bg-success{% elif row.percent >= 50 %}bg-warning{% else %}bg-danger{% endif %}"
             role="progressbar" style="width: {{ row.percent }}%;"></div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <div class="d-flex flex-wrap justify-content-center gap-2">
    <a href="{% url 'courses:course_detail' slug=course.slug %}" class="btn btn-outline-primary">Back to course</a>
    {% if attempt.passed %}
      {% if practical_blocks_certificate %}
        <div class="w-100 alert alert-warning text-start mx-auto mb-2" style="max-width:28rem;">
          <strong>Practical required</strong>
          <p class="small mb-2 mt-1">
            This track issues a <em>Theory + Practical Assessment</em> certificate.
            Submit your practical work for review — the certificate is blocked until a reviewer approves it.
          </p>
          {% if practical and practical.reviewer_notes and practical.can_resubmit %}
          <div class="small border rounded p-2 bg-white mb-2" style="white-space:pre-wrap;">{{ practical.reviewer_notes }}</div>
          {% endif %}
          {% if practical and practical.status == 'pending' %}
          <span class="badge text-bg-warning">Awaiting review</span>
          <a href="{% url 'courses:practical_submit' attempt_id=attempt.pk %}" class="btn btn-sm btn-outline-secondary ms-1">View status</a>
          {% else %}
          <a href="{% url 'courses:practical_submit' attempt_id=attempt.pk %}" class="btn btn-warning btn-sm">
            {% if practical and practical.can_resubmit %}Resubmit practical{% else %}Submit practical{% endif %}
          </a>
          {% endif %}
        </div>
      {% elif certificate %}
        <a href="{% url 'verify_certificate' certificate_id=certificate.certificate_number %}" class="btn btn-success" target="_blank" rel="noopener">
          Verify certificate
        </a>
        {% if certificate.pdf_file %}
        <a href="{{ certificate.pdf_file.url }}" class="btn btn-primary" target="_blank" rel="noopener">Download PDF</a>
        {% endif %}
        {% if certificate.badge_image %}
        <a href="{{ certificate.badge_image.url }}" class="btn btn-outline-success" target="_blank" rel="noopener">Skill badge</a>
        {% endif %}
        {% if not certificate.assets_ready %}
        <p class="w-100 small text-muted mt-2 mb-0">Certificate PDF &amp; badge are generating — refresh shortly.</p>
        {% endif %}
        <p class="w-100 small text-muted mt-1 mb-0">{{ certificate.assessment_label }}</p>
        {% if certificate.is_valid %}
        <div class="w-100 text-start mx-auto mt-3 p-3 border rounded-4 bg-white" style="max-width:28rem;" id="freelancer-share">
          <div class="fw-semibold small mb-1"><i class="bi bi-briefcase me-1"></i>Share on Fiverr / Upwork</div>
          <p class="small text-muted mb-2">Copy this line into your freelancer profile, then download the badge image.</p>
          <textarea class="form-control form-control-sm mb-2" id="freelancer-blurb" rows="3" readonly>{{ freelancer_blurb }}</textarea>
          <div class="d-flex flex-wrap gap-2">
            <button type="button" class="btn btn-sm btn-outline-primary" id="copy-freelancer-blurb">Copy profile line</button>
            {% if certificate.badge_image %}
            <a class="btn btn-sm btn-outline-success" href="{{ certificate.badge_image.url }}" download>Download badge</a>
            {% endif %}
            <a class="btn btn-sm btn-link" href="{% url 'verify_certificate' certificate_id=certificate.certificate_number %}" target="_blank" rel="noopener">Verify link</a>
          </div>
        </div>
        <script>
        (function () {
          var btn = document.getElementById('copy-freelancer-blurb');
          var ta = document.getElementById('freelancer-blurb');
          if (!btn || !ta) return;
          btn.addEventListener('click', function () {
            ta.select();
            try {
              navigator.clipboard.writeText(ta.value);
              btn.textContent = 'Copied';
            } catch (e) {
              document.execCommand('copy');
              btn.textContent = 'Copied';
            }
          });
        })();
        </script>
        {% endif %}
      {% else %}
        <p class="w-100 small text-muted">Certificate will appear here once issued.</p>
      {% endif %}
    {% else %}
    <a href="{% url 'courses:exam_start' slug=course.slug %}" class="btn btn-warning">Try again</a>
    {% endif %}
  </div>
</div>
{% endblock %}